<template>
  <div class="orders-container">
    <h2>我的订单</h2>
    
    <div v-if="loading" class="loading">
      <el-skeleton :rows="5" animated />
    </div>
    
    <div v-else-if="orders.length === 0" class="empty-orders">
      <el-empty description="暂无订单" />
      <el-button type="primary" @click="$router.push('/products')">去购物</el-button>
    </div>
    
    <div v-else class="orders-content">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部订单" name="all">
          <order-list :orders="filteredOrders" @refresh="fetchOrders" />
        </el-tab-pane>
        <el-tab-pane label="待付款" name="pending">
          <order-list :orders="filteredOrders" @refresh="fetchOrders" />
        </el-tab-pane>
        <el-tab-pane label="已付款" name="paid">
          <order-list :orders="filteredOrders" @refresh="fetchOrders" />
        </el-tab-pane>
        <el-tab-pane label="已发货" name="shipped">
          <order-list :orders="filteredOrders" @refresh="fetchOrders" />
        </el-tab-pane>
        <el-tab-pane label="已完成" name="completed">
          <order-list :orders="filteredOrders" @refresh="fetchOrders" />
        </el-tab-pane>
        <el-tab-pane label="已取消" name="cancelled">
          <order-list :orders="filteredOrders" @refresh="fetchOrders" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import request from '@/utils/request';
import { ElMessage } from 'element-plus';
import OrderList from '@/components/OrderList.vue';

export default {
  name: 'OrdersList', // 将"Orders"改为"OrdersList"
  components: {
    OrderList
  },
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    
    const orders = ref([]);
    const loading = ref(false);
    const activeTab = ref('all');

    const filteredOrders = computed(() => {
      if (activeTab.value === 'all') {
        return orders.value;
      }
      return orders.value.filter(order => {
        switch (activeTab.value) {
          case 'pending':
            return order.status === 0;
          case 'paid':
            return order.status === 1;
          case 'shipped':
            return order.status === 2;
          case 'completed':
            return order.status === 3;
          case 'cancelled':
            return order.status === 4;
          default:
            return true;
        }
      });
    });

    const fetchOrders = async () => {
      if (!userStore.isAuthenticated()) {
        router.push('/login');
        return;
      }

      loading.value = true;
      try {
        const response = await request.get('/orders', { params: { userId: userStore.userId } });
        
        if (response.code === 200) {
          orders.value = response.data || [];
        } else {
          ElMessage.error(response.message || '获取订单失败');
        }
      } catch (error) {
        console.error('获取订单失败:', error);
        ElMessage.error('获取订单失败');
      } finally {
        loading.value = false;
      }
    };

    const handleTabClick = () => {
      // 标签切换时不需要额外操作，computed会自动过滤
    };

    onMounted(() => {
      fetchOrders();
    });

    return {
      orders,
      loading,
      activeTab,
      filteredOrders,
      fetchOrders,
      handleTabClick
    };
  }
};
</script>

<style scoped>
.orders-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.orders-container h2 {
  margin-bottom: 20px;
  color: #333;
}

.loading {
  padding: 40px;
}

.empty-orders {
  text-align: center;
  padding: 60px 20px;
}

.orders-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>